<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Float</title>
    <style>
        .box{
            float: left;
            width: 200px;
            height: 100px;
            margin: lem;
        }
        .after-box {
            clear: left;
        }
    </style>
</head>
<body>
<div class="box">
    我感觉我好像在漂浮！！
</div>
<section>
    在这个例子中， section 元素实际上是在 div 之后的（译注：DOM结构上）。然而 div 元素是浮动到左边的，
    于是 section 中的文字就围绕了 div ，并且 section 元素包围了整个元素。如果我们想让 section 显示在浮动元素之后呢？
</section>
<section class="after-box">
    使用 clear 我们就可以将这个段落移动到浮动元素 div 下面。你需要用 left 值才能清除元素的向左浮动。
    你还可以用 right 或 both 来清除向右浮动或同时清除向左向右浮动。
</section>
</body>
</html>